<template>
	<view>
		<unicloud-db v-slot:default="{data}" collection="abu_post" ref="udb">
			<view class="items">
				<uni-list>
					<uni-list-item :title="item.title" direction="column" v-for="(item,index) in data"
						:to="'./luntan_info?id='+item._id">
						<template v-slot:header>
							<view class="title"
								style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
								<view class="uni-title">{{item.title}}</view>
								<view class="time">
									{{timestampToDateString(item.create_time)}}
								</view>
							</view>
						</template>
						<template v-slot:body>
							<image v-if="item&&item.post_file&&item.post_file.url" :src="item.post_file.url"
								style="width: 100%;  padding: 10px; " mode="aspectFill"></image>
						</template>
						<template v-slot:footer>
							<view class="uni-footer"
								style="display: flex;flex-direction: row;justify-content: space-between;">
								<text class="uni-footer-text">点赞数：{{item.like_count||0}}</text>
								<text class="uni-footer-text">评论数量：{{item.comment_count||0}}</text>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</unicloud-db>
		<uni-fab ref="fab" @fabClick="fabClick" horizontal="right" />
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		// 页面生命周期，下拉刷新后触发
		onPullDownRefresh() {
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				// 停止下拉刷新
				uni.stopPullDownRefresh()
			})
		},
		methods: {
			fabClick() {
				uni.navigateTo({
					url: "/pages/abu_post/add"
				})
			},
			timestampToDateString(timestamp) {
				var date = new Date(timestamp);
				// 使用 Date 对象的方法获取年、月、日等信息
				var year = date.getFullYear();
				var month = date.getMonth() + 1; // 月份是从 0 开始的，所以需要加 1
				var day = date.getDate();
				// 将其格式化为想要的字符串格式
				var dateString = year + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
				return dateString;
			},
		}
	}
</script>

<style>
	/* 页面基础样式设置，如背景色 */
	.page {
		display: flex;
		flex-direction: column;
		background-color: #f0f2f5;
		/* 设置页面背景色为浅灰，让页面看起来更轻松 */
	}

	/* 列表项容器样式 */
	.items {
		margin: 10px;
		/* 在容器四周添加略微的空间，让布局不那么拥挤 */
	}

	/* uni-list样式调整 */
	uni-list {
		background-color: transparent;
		/* 去掉默认的背景颜色，使用页面背景 */
	}

	/* 列表项样式 */
	.uni-list-item {
		background-color: #ffffff;
		/* 设置背景色为白色 */
		margin-bottom: 15px;
		/* 设置列表项之间的距离 */
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		/* 添加阴影效果，增加立体感 */
		border-radius: 8px;
		/* 圆角边框 */
		overflow: hidden;
		/* 防止子元素溢出容器 */
	}

	/* 标题栏样式 */
	.title {
		padding: 15px;
		/* 标题内边距 */
		font-size: 16px;
		/* 标题字体大小 */
		color: #333;
		/* 标题字体颜色 */
		font-weight: bold;
		/* 加粗字体 */
	}

	/* 时间显示样式 */
	.time {
		font-size: 14px;
		/* 字体大小 */
		color: #666;
		/* 字体颜色，稍微深色 */
	}

	/* 图片样式 */
	image {
		width: 100%;
		/* 宽度100%，确保横向填满容器 */
		aspect-ratio: 16/9;
		/* 设置图片宽高比，防止图片拉伸，保持美观 */
	}

	/* 底部信息样式，如点赞数和评论数量 */
	.uni-footer {
		display: flex;
		justify-content: space-between;
		/* 两端对齐 */
		padding: 10px 15px;
		/* 内边距 */
		background-color: #f8f8f8;
		/* 背景色 */
		border-top: 1px solid #eee;
		/* 上边框，与列表项内容区分开 */
	}

	.uni-footer-text {
		font-size: 14px;
		/* 字体大小 */
		color: #999;
		/* 字体颜色，淡色系 */
	}

	/* 悬浮按钮样式 */
	uni-fab {
		--button-color: #007aff;
		/* 按钮颜色 */
		--button-icon-color: #ffffff;
		/* 图标颜色 */
	}
</style>